<template>
  <div class="app-container">
    <!--查询栏-->
    <el-form :inline="true"
             v-if="advanced"
             :model="userSurveyQuery"
             class="demo-form-inline">

      <el-form-item label="用户姓名" prop="name">
        <el-input v-model="userSurveyQuery.name" placeholder="用户姓名"></el-input>
      </el-form-item>

      <el-form-item label="满意度调查题目" prop="title">
        <el-input v-model="userSurveyQuery.title" placeholder="满意度调查题目"></el-input>
      </el-form-item>

      <el-form-item label="满意度调查题目内容" prop="type">
        <el-input v-model="userSurveyQuery.question" placeholder="满意度调查题目内容"></el-input>
      </el-form-item>

      <el-form-item label="满意度调查题目类型" prop="type">
        <el-input v-model="userSurveyQuery.type" placeholder="满意度调查题目类型"></el-input>
      </el-form-item>

      <el-form-item label="用户答案" prop="userAnswer">
        <el-input v-model="userSurveyQuery.userAnswer" placeholder="用户答案"></el-input>
      </el-form-item>

      <el-form-item label="用户开始答题时间" prop="createTime">
        <el-date-picker v-model="userSurveyQuery.createTime"
                        type="datetime"
                        style="width: 100%"
                        placeholder="用户开始答题时间"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        default-time="00:00:00"
        ></el-date-picker>
      </el-form-item>

    </el-form>

    <!-- 操作 -->
    <div>
         <span class="table-page-search-submitButtons">

            <span class="submitButtons-left">
              <el-button size="small" :loading="downloadLoading" @click="handleDownload" icon="el-icon-download">导出</el-button>
            </span>

            <span class="submitButtons-right">
              <el-button size="small" type="primary" @click="submitUserSurveyQuery" icon="el-icon-search" plain>查询</el-button>
              <el-button size="small" @click="resetUserSurveyQuery" icon="el-icon-refresh">重置</el-button>
              <a @click="toggleAdvanced" style="margin-left: 8px; color: #00BFFF; font-size: 14px">
                {{ advanced ? '收起' : '展开' }}
                <i :class="advanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'" />
              </a>
            </span>

         </span>
    </div>

    <!--表格-->
    <el-table v-loading="isLoading"
              :data="userSurveyList"
              element-loading-text="数据加载中"
              border
              fit
              @selection-change="handleSelectionChange"
              ref="multiplePublishActTable"
              highlight-current-row>

      <el-table-column type="selection" width="44" align="center"></el-table-column><!--选择一行-->
      <el-table-column prop="id" label="答题编号" width="120" align="center"></el-table-column>
      <el-table-column prop="name" label="用户姓名" width="100" align="center"></el-table-column>
      <el-table-column prop="title" label="满意度调查题目" width="160" align="center"></el-table-column>
      <el-table-column prop="question" label="问题内容" width="220" align="center"></el-table-column>
      <el-table-column prop="type" label="满意度调查题目类型" width="150" align="center"></el-table-column>
      <el-table-column prop="userAnswer" label="用户答案" width="90" align="center"></el-table-column>
      <el-table-column prop="questionScore" label="用户得分" width="90" align="center"></el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="160" align="center"></el-table-column>

      <el-table-column label="操作" align="center">

        <template slot-scope="scope">

          <el-button type="primary" @click="updateUserSurvey(scope.row)" size="mini" icon="el-icon-edit" round plain>修改</el-button>

          <el-button type="danger" size="mini" icon="el-icon-delete"
                     @click="removeUserSurvey(scope.row)" round plain>删除
          </el-button>

        </template>
      </el-table-column>

    </el-table>

    <!--分页器-->
    <el-pagination
      background
      :current-page="queryParams.currentPage"
      :page-size="queryParams.limit"
      :total="userSurveyListTotal"
      style="padding: 60px 0; text-align: center;"
      layout="total, prev, pager, next, jumper"
      @current-change="getUserSurveyList"
    />

    <!--修改会员卡对话框-->
    <el-dialog :title="title" @close="updateUserSurveyCancel" :visible.sync="updateVisible" width="800px" append-to-body>
      <el-form :model="updateForm" ref="updateForm" label-width="160px" :rules="updateUserSurveyRules">

        <el-form-item label="用户答案" prop="name" width="100px">
          <el-input placeholder="请选择" v-model="updateForm.userAnswer"/>
        </el-form-item>

        <el-form-item label="用户得分" prop="name" width="100px">
          <el-input placeholder="请选择" v-model="updateForm.questionScore"/>
        </el-form-item>

        <el-form-item label="创建时间" prop="createTime">
          <el-date-picker v-model="updateForm.createTime"
                          type="datetime"
                          style="width: 100%"
                          placeholder="开卡时间"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          default-time="00:00:00"
          ></el-date-picker>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitUpdateUserSurvey">保存</el-button>
        <el-button @click="updateUserSurveyCancel">取 消</el-button>
      </div>

    </el-dialog>

  </div>
</template>

<script>
  import userSurvey from '@/api/survey/userSurvey'
  export default
  {
    name:"userSurveyList",
    data()
    {
      return {
        //用户满意度调查查询条件
        userSurveyQuery:
        {
          name:"",
          title:"",
          type:"",
          question:"",
          userAnswer:"",
          createTime:""
        },

        //选择哪一行会员列表
        multipleSelection: [],
        filename: "答题记录",//
        autoWidth: true,//excel表格宽度
        bookType: "xlsx",//excel后缀名
        downloadLoading:false,
        addVisible:false,//新增会员卡对话框是否可见
        queryUserIntegralVisible:false,//查询会员卡积分明细对话框是否可见
        // 高级搜索 展开true/关闭false
        advanced: false,
        updateForm: { //修改会员卡表单
          id:"",
          questionScore:"",
          userAnswer:"",
          createTime:""
        },
        updateVisible: false,//修改会员卡对话框是否可见
        isLoading: true, //是否正在加载
        queryParams: //分页查询参数
          {
            currentPage: 1,
            limit: 4,
          },
        title: "",

        //导出的会员卡列表
        userSurveyLists: [],
        //会员卡列表
        userSurveyList: [],

        //会员卡查询可见性
        queryUserSurveyVisible: false,

        //会员卡列表总记录数
        userSurveyListTotal: 0,

        //选择哪一行会员卡列表
        multipleUserSurveySelection: [],

        //会员卡的检查规则
        updateUserSurveyRules:
          {
            //name createTime title question type userAnswer questionScore
            //用户姓名 满意度调查题目 满意度调查题目内容 满意度调查题目类型 用户答案 用户开始答题时间
            createTime:
              [
                { required: true, message: "用户开始答题时间不能为空！", trigger: "change" }
              ],
            userAnswer:
              [
                { required: true, message: "用户答案不能为空！", trigger: "change" }
              ],
            questionScore:
              [
                { required: true, message: "用户得分不能为空！", trigger: "change" }
              ]
          },

      }
    },
    methods:
      {
        //选中活动的一行时的事件
        handleSelectionChange(val)
        {
          this.multipleSelection = val;
        },
        //导出
        handleDownload()
        {
          if(this.multipleSelection.length ===0)
          {
            this.$message.warning("请勾选要导出的答题记录!");
            return;
          }
          this.$message.success("将导出已勾选的答题记录");
          let that = this;
          let list = this.userSurveyList;

          setTimeout(()=>
          {
            that.downloadLoading = true;
            import('@/vendor/Export2Excel').then(excel =>
            {
              //name createTime title question type userAnswer questionScore
              const tHeader = ['答题编号','用户姓名','满意度调查题目','问题内容','满意度调查题目类型','用户答案','用户得分','创建时间'];//导出的excel表
              const filterVal = ['id', 'name', 'title', 'question','type', 'userAnswer', 'questionScore', 'createTime'];//table属性
              const data = this.formatJson(filterVal, list);
              excel.export_json_to_excel({
                header: tHeader,
                data,
                filename: this.filename,
                autoWidth: this.autoWidth,
                bookType: this.bookType
              })
              that.downloadLoading = false
            })
          },1200);
          this.multipleSelection = [];
          //清除选中的活动
          this.$refs.multiplePublishActTable.clearSelection();
        },
        formatJson(filterVal, jsonData)
        {
          return jsonData.map(v => filterVal.map(j => {
            if (j === 'timestamp') {
              return parseTime(v[j])
            } else {
              return v[j]
            }
          }))
        },
        /*query展开和收起*/
        toggleAdvanced()
        {
          this.advanced = !this.advanced;
        },

        //重置会员卡
        resetUserSurveyQuery()
        {
          this.userSurveyQuery =
            {
              name:"",
              title:"",
              type:"",
              question:"",
              userAnswer:"",
              createTime:""
            },
          this.getUserSurveyList();
        },
        //查询参与人
        submitUserSurveyQuery()
        {
          if(!this.advanced)
          {
            this.advanced = !this.advanced;

          }else
          {
            this.getUserSurveyList();
          }
        },

        //获取会员卡列表
        getUserSurveyList(currentPage = 1)
        {
          let that = this;
          this.queryParams.currentPage = currentPage;
          this.isLoading = true;
          userSurvey.pageUserSurveyCondition(this.queryParams.currentPage,this.queryParams.limit,this.userSurveyQuery)
            .then(response=>
            {
              console.log(response.data.rows)
              this.userSurveyList = response.data.rows;
              this.userSurveyListTotal = response.data.total;
              this.isLoading = false;
            }).catch(error => {
            this.isLoading = false;
            that.$message.error(error);})
        },

        //通过id删除会员卡
        removeUserSurvey(row)
        {
          let id = row.id;
          let that = this;
          that.$confirm("是否确认删除用户"+row.name+"的答题记录?").then(function()
          {
            userSurvey.deleteUserSurveyById(id).then((response)=>
            {
              if(response.code === 200)
              {
                that.$message.success("删除成功！");
                that.getUserSurveyList();
              }else
              {
                that.$message.error("删除失败！");
              }
            }).catch(error=> {
              console.log(error)
            })
          })
        },


        //关闭修改会员框
        updateUserSurveyCancel()
        {
          this.updateVisible = false;
        },

        //点击修改用户答题记录对话框
        updateUserSurvey(row)
        {
          //name createTime title question type userAnswer questionScore
          this.updateVisible = true;
          this.title="修改用户答题记录";
          this.updateForm.id = row.id;
          this.updateForm.createTime = row.createTime;
          this.updateForm.userAnswer = row.userAnswer;
          this.updateForm.questionScore = row.questionScore;
        },

        //提交会员卡的修改
        submitUpdateUserSurvey()
        {
          let that = this;
          this.$refs['updateForm'].validate((valid) =>
          {
            if(valid)
            {
              userSurvey.updateUserSurvey(this.updateForm).then((response)=>
              {
                if(response.code === 200)
                {
                  this.$message.success("修改成功!");
                  that.updateVisible = false;
                  that.title="";
                  that.updateForm =
                    {
                      id:"",
                      questionScore:"",
                      userAnswer:"",
                      createTime:""
                    };
                  that.getUserSurveyList();
                }else
                {
                  this.$message.error("修改失败!");
                }
              });
            }
          });
        },

        //关闭会员卡的修改
        updateUserSurveyCancel()
        {
          this.updateVisible = false;
          this.title="";
          this.updateForm =
            {
              id:"",
              questionScore:"",
              userAnswer:"",
              createTime:""
            };
        },
      },

    created()
    {
      this.getUserSurveyList();
    }
  }
</script>

<style>
  .table-page-search-submitButtons
  {
    height: 50px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

</style>

